<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水位3D图</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		
			<link rel="stylesheet" href="../common/css/mui.min.css" />
			<link rel="stylesheet" href="../common/css/common.css" />
		<script src="../common/js/jquery.js"></script>
		<script src="../common/js/echarts.min.js"></script>
		<script type="text/javascript" src="../common/js/echarts-gl.min.js"></script>
		<script type="text/javascript" src="../common/js/layer/layer.js"></script>
		<script src="../js/common.js"></script>
		<style>
			.chart{
				width: 100%;
				height: 400px;
			}
		</style>
	</head>
	<body class="fabu" style="background: #fff;">
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">数据变化图</h1>
		</header>-->
		<div class="middle-content" style="margin-top:0;">
			<!-- 内容start -->
			<div class="header">
				<div class="header-left">
					<a class="sb-back2" href="#" onclick="backTo()" title="返回"></a>
				</div>
				<div class="header-middle">水位3D图</div>
			</div>
			<div style="height:50px;width: 100%;"></div>
			
		</div>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="chart" id="datachangeChart"></div>
			</div>
		</div>
	</body>
		<script type="text/javascript">
		var deviceValue=[];
			$(function(){
				deviceInfo();
				draw3DChart("datachangeChart");
			});
			function deviceInfo(){
  	var id=localStorage.getItem("id");
        $.ajax({
            type: "post",
            url: "http://"+remote_ip+":"+remote_port+"/"+remote_name+"/app/screen/show/deviceInfo?id="+id, //路径 
            async: false,
            dataType: "json",
            success: function (data) {
                if(data){
                	  deviceValue=data;                 
                }
            },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
			$.msg("获取数据失败!");
		}
            
        });
    }
		var draw3DChart=function (containerId){
			var id=localStorage.getItem("id");
			$.ajax({
            type: "post",
            url: "http://"+remote_ip+":"+remote_port+"/"+remote_name+"/app/screen/show/picture?staId="+id, //路径 
            // url: 'http://127.0.0.1:8080/jeeplus/a/screen/show/weatherInfo?id=3',
            // url: '${ctx}/weatherInfo?id=3',
            dataType: "json",
            success: function (data) {
                if(data){
                    var aConfig="";
                    var aConfigArr=[];
                    var baseConfig="";
                    var baseConfigArr=[];
                    var bConfig="";
                    var bConfigArr=[];
                    var configArr=[];
                    var configValueArr=[];

                    for (var i in data) {
                        if (data.hasOwnProperty(i) && typeof data[i] != "function") {
                            configArr.push(i);
                                   if(i=="A"){
                                       aConfigArr=data[i];
                                   }
                            if(i=="B"){
                                baseConfigArr=data[i];
                            }
                            if(i=="C"){
                                bConfigArr=data[i];
                            }
                           }
                     }
                     if(configArr.length==3){

                         var data_south=[];
                         var data_middle=[];
                         var data_north=[];
                         for(var i=0;i<aConfigArr.length;i++){
                            var tmp=[];
                            var deviceV=0;
                            for(var j=0;j<deviceValue.length;j++){
                                if(aConfigArr[i].id==deviceValue[j].deviceId){
                                    deviceV= deviceValue[j].reportValue;
                                }
                            }
                             tmp.push(parseFloat(deviceV));
                             tmp.push(aConfigArr[i].xLocation);
                             tmp.push(aConfigArr[i].order);
                             tmp.push(aConfigArr[i].color);
                             tmp.push(aConfigArr[i].code);
                             data_south.push(tmp);
                         }
                         for(var i=0;i<baseConfigArr.length;i++){
                             var tmp=[];
                             var deviceV=0;
                             for(var j=0;j<deviceValue.length;j++){
                                 if(baseConfigArr[i].id==deviceValue[j].deviceId){
                                     deviceV= deviceValue[j].reportValue;
                                 }
                             }
                             tmp.push(parseFloat(deviceV));
                             tmp.push(baseConfigArr[i].xLocation);
                             tmp.push(baseConfigArr[i].order);
                             tmp.push(baseConfigArr[i].color);
                             tmp.push(baseConfigArr[i].code);
                             data_middle.push(tmp);
                         }
                         for(var i=0;i<bConfigArr.length;i++){
                             var tmp=[];
                             var deviceV=0;
                             for(var j=0;j<deviceValue.length;j++){
                                 if(bConfigArr[i].id==deviceValue[j].deviceId){
                                     deviceV= deviceValue[j].reportValue;
                                 }
                             }
                             tmp.push(parseFloat(deviceV));
                             tmp.push(bConfigArr[i].xLocation);
                             tmp.push(bConfigArr[i].order);
                             tmp.push(bConfigArr[i].color);
                             tmp.push(bConfigArr[i].code);
                             data_north.push(tmp);
                         }
                       

                         var myChart = echarts.init(document.getElementById(containerId), 'macarons');
                         function data_process(list, n) {
                             let arr = [];
                             for (let i = 0; i < list.length; i++) {
                                 const element = list[i];
                                 // console.log(element);

                                 if (i === list.length - 1) {
                                     arr.push(element)
                                     break;
                                 }

                                 let distX = (list[i + 1][0] - list[i][0]) / n;
                                 let distY = (list[i + 1][2] - list[i][2]) / n;
                                 // console.log(distX);

                                 for (let j = 0; j < n; j++) {
                                     const x = list[i][0] + distX*j ;
                                     const y = list[i][2] + distY*j ;
                                     arr.push([x, element[1], y, element[3], element[4]])
                                 }
                             }
                             // console.log(arr);
                             return arr

                         }


                         function data_yprocess(list, n){
                             let arr = [];
                             for (let i = 0; i < list.length; i++) {
                                 const element = list[i];

                                 if (i === list.length - 1) {
                                     arr.push(element)
                                     break;
                                 }

                                 for (let j = 0; j < n; j++) {
                                     const name = element[1] + j
                                     // console.log("name::", name);

                                     arr.push([element[0], name , element[2], element[3],element[4]])
                                 }
                             }
                             // console.log(arr);
                             return arr
                         }
                         let south = []
                         let middle = []
                         let north = []
                         data = ["depth", "location", "face", "colors","device"],
                         south = data_process(data_south, 40)
                         middle = data_process(data_middle, 40)
                         north = data_process(data_north, 40)
 					
                         data = data.concat(south)
                         data = data.concat(data_yprocess(south,25))
                         data = data.concat(middle)
                         data = data.concat(data_yprocess(middle,40))
                         data = data.concat(north)
                         data = data.concat(data_yprocess(north,25))
                         option = {
                             title:{
                                 text:containerId=="bigForm" ? "水位3D图" : "",
                                 left: 'center',
                                 textStyle:{
                                     fontSize:24,

                                 },
                                 padding:10
                             },
                             tooltip: {},
                             grid: {
                                 top:'1%',
                                 left: '1%',
                                 right: '1%',
                                 bottom: '1%',
                                 containLabel: true
                             },
                             visualMap: {
                                 // ['#333', '#78ab23', 'blue']。意思就是以这三个点作为基准，
                                 // 形成一种『渐变』的色带，数据映射到这个色带上。
                                 // 也就是说，与 visualMap.min 相等的值会映射到
                                 // '#333'，与 visualMap.max 相等的值会映射到 'blue'。
                                 // 对于 visualMap.min 和 visualMap.max 中间的其他点，
                                 // 以所给定的 '#333', '#78ab23', 'blue' 这三个颜色作为
                                 // 基准点进行分段线性插值，得到映射结果。
                                 max: 100,
                                 color:['#333', '#78ab23', 'blue'],
                                 dimension: 'colors'
                             },
                             xAxis3D: {
                                 type: 'category',
                                 name:'位置顺序',

                                 axisTick: {
                                     show:false

                                 },
                                 axisLabel:{
                                     show:false,
                                     color:function(){
                                         if(containerId=="bigForm"){
                                             return '#000';
                                         }else{
                                             return '#fff';
                                         }
                                     }()
                                 }
                             },
                             yAxis3D: {
                                 type: 'category',
                                 name:'两岸及基坑',
                                 axisTick: {
                                     show: false

                                 },
                                 axisLabel:{
                                     show:false,
                                     color:function(){
                                         if(containerId=="bigForm"){
                                             return '#000';
                                         }else{
                                             return '#fff';
                                         }
                                     }()
                                 }
                             },
                             zAxis3D: {
                                 name:'深度'
                             },
                             grid3D: {
                                 // 是否显示三维坐标
                                 // show:true
                             },dataset: {
                                 // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
                                 dimensions: [
                                     'depth',
                                     'location',
                                     'face',
                                     // 'ordinal' 表示离散型，一般文本使用这种类型。
                                     // {name: 'face', type: 'ordinal'},
                                     'colors',
                                     'device'
                                 ],
                                 source: data
                             },
                             series: [
                                 {
                                     type: 'bar3D',
                                     // symbolSize: symbolSize,
                                     shading: 'lambert',
                                     encode: {
                                         // 将 "face" 列映射到 X 轴。
                                         x: 'face',
                                         y: 'location',
                                         z: 'depth',
                                         // tooltip: [0, 1, 2, 3]
                                     }
                                 }
                             ]
                         }
                         myChart.setOption(option,true);


                     }
                }
            }
        });
		}
		
		</script>
</html>
